<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html {
				font-size: 16px;
				-webkit-font-smoothing：antialiased;
			}

			.view {
				position: relative;
				height: 18.75rem;
				overflow: hidden;
			}

			.box {
				height: 100%;
				width: 700%;
				transform: translateX( calc(100% / -7 ) );
				display: flex;
			}

			.box li {
				height: 100%;
				width: 100%;
				font-size: 6.25rem;
				list-style: none;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.a {background: #f0a4f9;}
			.b {background: #7fffb2;}
			.c {background: #ffaeae;}
			.d {background: #feffa5;}
			.e {background: #5eecd2;}
		</style>
	</head>
	<body>
		<div class="view">
			<ul class="box">
				<li class="e">e</li>
				<li class="a">a</li>
				<li class="b">b</li>
				<li class="c">c</li>
				<li class="d">d</li>
				<li class="e">e</li>
				<li class="a">a</li>
			</ul>
		</div>

		<script type="text/javascript">
			document.addEventListener('DOMContentLoaded', function() {
				var box = document.querySelector('.box');
				var cWidth = document.documentElement.clientWidth; // 当前屏幕大小
				var curr = 1; // 当前的li序号
				var pos = -cWidth; // box的初始位置
				let downX;	// 按下的位置
				let trans;	// box的transform值
				let transX;
				let disX;		// 手指滑动的距离
				let reset=false;	// 是否重置初始位置
				let num = document.querySelectorAll('.box li').length-2;	// 图片数量
				let boxLen;		// 去重后box长度
				
				// 调整初始字体大小
				document.documentElement.style.fontSize = 16 * cWidth / 375 + 'px';
				boxLen = num*cWidth;
				
				window.onresize = function() {
					cWidth = document.documentElement.clientWidth;
					document.documentElement.style.fontSize = 16 * cWidth / 375 + 'px';
					pos = -curr * cWidth;
					boxLen = num*cWidth;
					box.style.transform = `translateX(${pos}px)`;
				};

				box.addEventListener('touchstart', function() {
					
					trans = getComputedStyle(this, null).transform.replace(/[^.\d,-]/g, '').split(',');
					transX = parseFloat(trans[4]);
					downX = event.targetTouches[0].clientX;
					curr>num?((curr=1)&&(pos =transX+boxLen)):curr<1?((curr=num)&&(pos =transX-boxLen)):(pos =transX);
					this.style.transition = 'none';
					this.style.transform = `translateX(${pos}px)`;	// 固定box的位置

					function move() {
						disX = downX - event.targetTouches[0].clientX;
						this.style.transform = `translateX(${-1*disX+pos}px)`;
					}

					function up() {
						disX = downX - event.changedTouches[0].clientX;
						this.style.transition = 'all 0.18s linear';
						if (disX > 80) {
							curr++;
							curr>num&&(reset=true);
						} else if (disX < -80) {
							curr--;
							curr<1&&(reset=true);
						}
						pos = -curr * cWidth;
						this.style.transform = `translateX(${pos}px)`;
						this.removeEventListener('touchmove', move, false);
						this.removeEventListener('touchend', up, false);
					}

					this.addEventListener('touchmove', move, false);
					this.addEventListener('touchend', up, false);
					this.addEventListener('transitionend', function() {
						if(reset){
							curr>num?(curr=1):curr<1?(curr=num):'';
							this.style.transition = 'none';
							pos = -curr * cWidth;
							box.style.transform = `translateX(${pos}px)`;
							reset = false;
						}
					}, false);
					
					event.preventDefault();
				}, false)

			}, false);
		</script>
	</body>
</html>
